<template>
  <xcmg-drawer v-model="_visible" :title="props.title" width="800">
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" @click="handleSave()"
          >保存</el-button
        >
        <el-button @click="handleClose()">取消</el-button>
      </div>
    </template>
  </xcmg-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps<{
  title: string;
  visible: boolean,
}>();

const emit = defineEmits(['update:visible']);

const _visible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});
const handleSave = () => {
  // 保存逻辑
  _visible.value = false;
};
const handleClose = () => {
  _visible.value = false;
};
</script>

<style scoped>
.drawer-footer {
  width: calc(100% - 40px) !important;
  border-top: none !important;
}
</style>